<template>
    <div>
        <div class="header">
            <i class="el-icon-arrow-left icon" @click="editHandler"></i>
            <div class="title">{{ id }}
            </div>
        </div>

        <div class="line"></div>

        <div class="content" ref="list" @scroll="handleScroll">
            <div class="message-container" v-for="(item, idx) in chatValueList" :key="idx">
                <div class="left_div" v-show="item.msgfrom != sendData.nick && bracketHandler(item.msgcontent)">
                    <img src="@/assets/images/otherApp/user.png">
                    <div>
                        <div style="margin-left: 18px;font-size: 12px;">{{ item.sendtime }}</div>
                        <div style="display: flex; align-items: center;">
                            <div class="triangle_left"></div>
                            <div class="message-bubble left-bubble">
                                <span>{{ item.msgcontent }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right_div" v-show="item.msgfrom == sendData.nick && bracketHandler(item.msgcontent)">
                    <div style="display: flex; flex-direction: column;align-items: flex-end;">
                        <div style="margin-right: 10px;font-size: 12px;">{{ item.sendtime }}</div>
                        <div style="display: flex;align-items: center;">
                            <div class="message-bubble right-bubble">
                                <span>{{ item.msgcontent }}</span>
                            </div>
                            <div class="triangle_right"></div>
                        </div>
                    </div>
                    <img src="@/assets/images/otherApp/userBlue.png">
                </div>
            </div>
            <div v-show="showLoading">
                <el-divider>{{loadingText}}</el-divider>
            </div>
        </div>

    </div>
</template>

<script>
import { getChatValueApi } from '@/api/addApp/beike_api.js'
import { throttle } from 'lodash';
export default {
    name: 'messageDetail',
    props: ['id', 'sendData'],
    data() {
        return {
            chatValueList: [],
            offset: 1,
            limit: 20,
            list: [],
            loadingText: '正在加载中...',
            showLoading: false,//控制加载文本的显示
        };
    },
    components: {

    },
    created() {

    },
    mounted() {
        this.getChatValueList();
    },
    methods: {
        //判断是否滚到底部 触发条件
        handleScroll: throttle(function () {
            const list = this.$refs.list;
            // 判断滚动到底部
            if (list.scrollTop + list.clientHeight + 10 + 10 >= list.scrollHeight) {

                this.showLoading = true;
                if (this.list.length == this.limit) {
                    this.loadingText = '正在加载. . .';
                    this.offset++
                    this.getChatValueList();
                } else {
                    this.loadingText = '到底了 没有更多了！';
                }
            }
        }),
        //点击返回
        editHandler() {
            this.$emit('edit')
        },
        //获取消息列表
        async getChatValueList() {
            let data = {
                proof_num: this.sendData.proof_num,
                uid: this.sendData.nick,
                convid: this.id,
                offset: this.offset,
                limit: this.limit,
            }
            try {
                let list = await getChatValueApi(data);
                this.list = list.data
                this.chatValueList.push(...list.data)
            } catch (error) {
                console.error(error)
            }
        },
        //里面含有括号就不显示
        bracketHandler(data) {
            if (data.includes('{')) {
                return false
            } else {
                return true
            }
        }
    },
};
</script>

<style lang='scss' scoped>
.header {
    width: 100%;
    height: 50px;
    position: relative;

    .icon {
        font-size: 20px;
        position: absolute;
        left: 10px;
        top: 15px;
    }

    .title {
        line-height: 50px;
        text-align: center;
        width: 100%;
        font-weight: 900;
        font-size: 18px;
    }
}

.line {
    height: 1px;
    background-color: #f1f1f1;
}

.content {
    padding: 10px 20px;
    height: 820px;
    overflow-y: auto;

    .message-container {
        display: flex;
        flex-direction: column;
        width: 100%;

        .left_div {
            display: flex;
            align-items: center;
            justify-content: flex-start;

            .triangle_left {
                height: 0px;
                width: 0px;
                border-width: 6px;
                border-style: solid;
                border-color: transparent #f1f1f1 transparent transparent;
            }

            .left-bubble {
                background-color: #f1f1f1;
                color: #333;
            }
        }

        .right_div {
            align-self: flex-end;
            display: flex;
            align-items: center;
            justify-content: end-start;

            .triangle_right {
                height: 0px;
                width: 0px;
                border-width: 6px;
                border-style: solid;
                border-color: transparent transparent transparent #b2e281;
            }

            .right-bubble {
                background-color: #b2e281;
                color: #fff;
            }
        }
    }

}

@media screen and (min-width: 2360px) {
    .content {
        height: 770px;
    }
}

@media screen and (min-width: 2561px) {
    .content {
        height: 630px;
    }
}


.message-bubble {
    display: inline-block;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.4;
    max-width: 270px;
}</style>